<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>AIL-Framework</title>
	<link rel="icon" href="{{ url_for('static', filename='image/ail-icon.png')}}">
	<!-- Core CSS -->
	<link href="{{ url_for('static', filename='css/bootstrap4.min.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">

	<!-- JS -->
	<script src="{{ url_for('static', filename='js/jquery.js')}}"></script>
	<script src="{{ url_for('static', filename='js/bootstrap4.min.js')}}"></script>

</head>

<body class="text-center">
    <img class="mb-4" src="{{ url_for('static', filename='image/ail-project.png')}}" width="200">
    <h1 class="text-secondary">2FA: OTP Setup</h1>

    <div class="row">
        <div class="col-lg-6">
            <h3 class="text-secondary mb-0"><b>TOTP</b></h3>
            <img src="data:image/png;base64, {{ qr_code }}">
            <div style="font-size: 20px;"> - Install an <b>authenticator application</b> on your mobile.</div>
            <div style="font-size: 20px;"> - <b>Scan</b> the QRCode</div>
            <p>
                <button class="btn btn-sm btn-info" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                    <i class="fas fa-link"></i> <b>TOTP URL</b>
                </button>
            </p>
            <div class="collapse" id="collapseExample">
                <div class="card card-body">
                    {{ otp_url }}
                </div>
            </div>
            </div>
        <div class="col-lg-6">
            <h3 class="text-secondary"><b>HOTP</b></h3>
                {% for code in hotp_codes %}
                    <div><i>{{ code[:-6] }}</i> <b>{{ code[-6:] }}</b></div>
                {% endfor %}
        </div>

    </div>

    <form class="form-signin" action="{{ url_for('root.setup_2fa')}}"  method="post">
{#        <h1 class="h3 mb-3 text-secondary">2FA: Please Enter your TOTP or HOTP</h1>#}
        <div class="mx-4">
            <input type="text" id="otp" name="otp" class="form-control {% if error %}is-invalid{% endif %}" placeholder="OTP Code" autocomplete="off" required autofocus>
            {% if error %}
                <div class="invalid-feedback">
                    {{error}}
                </div>
            {% endif %}
            <button class="btn btn-lg btn-primary btn-block mb-4" type="submit">Once you have scanned the QRCode or copied the HOTP codes, Please Enter your TOTP or HOTP</button>
        </div>
    </form>


</body>
